// .big-event {

// }

// .big-event__circle {
//   height: 200px;
//   &-content {
//     height: 100px;
//     & h5 {
//       text-align: center;
//       margin: 4px 0;
//       color:black;
//     }
//     & a {
//       color: #a6a7a2;
//     }
//     width: 25%;
//     &__msg {
//       font-size: 12px;
//       color: #a6a7a2;
//       text-align: left;
//       margin: 4px 0;
//     }
//     & span{
//       color:#a6a7a2;
//     }
//   }
//   &-big {
//     border-radius: 26px;
//     background: #c8a587;
//     height: 26px;
//     width: 26px;
//     margin: 8px auto;
//     z-index: 3;
//   }
//   &-small {
//     border-radius: 14px;
//     height: 14px;
//     width: 14px;
//     background: #c8a587;
//     margin: 8px auto;
//     z-index: 3;
//   }
//   &-mid {
//     border-radius: 20px;
//     height: 20px;
//     width: 20px;
//     background: #c8a587;
//     margin: 8px auto;
//     z-index: 3;
//   }
// }

// .big-event__circle {
//   &-1 {
//     position: relative;
//     top: 82px;
//     z-index: 3;
//   }
//   &-2 {
//     position: relative;
//     top: 32px;
//     left: -10%;
//     z-index: 3;
//   }
//   &-3 {
//     position: relative;
//     top: 79px;
//     left: -20%;
//     z-index: 3;

//   }
//   &-4 {
//     position: relative;
//     top: 32px;
//     left: -30%;
//     z-index: 3;

//   }
//   &-5 {
//     position: relative;
//     top: -21px;
//     left: 60%;
//     z-index: 3;

//   }
//   &-6 {
//     position: relative;
//     top: -36px;
//     left: 50%;
//     z-index: 3;

//   }
// }

// .mid-line {
//   border-top: 1px solid #cececc;
//   width: 100%;
//   position: relative;
//   top: 100px;
//   z-index: 1;
// }
.big-event {
  &__circle {
    position: relative;
    &-content {
      position: relative;
      height: 200px;
      &__title {
        position: absolute;
        width: 110%;
        text-align: center;
        &__top {
          top: 33%;
        }
        &__bottom {
          bottom:33%;
        }
      }
      &__msg {
        position: absolute;
        width: 17em;
        text-align: left;
        font-size: 12px;
        @media(max-width: 768px){
          width: 100%;
          text-overflow:ellipsis;
          overflow: hidden;
        }
        &__top {
          top: 14%;
          @media(max-width: 768px){
            //top:20%;
            text-align: center;
            max-height: 33px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        &__bottom {
          bottom: 14%;
          @media(max-width: 768px){
            //bottom:20%;
            text-align: center;
            max-height: 33px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        a {
          color: #a6a7a2;
        }
      }
    }
    &-point {
      position: absolute;
      top: 50%;
      left: 50%;
    }
    &-big {
      border-radius: 26px;
      background: #c8a587;
      height: 26px;
      width: 26px;
      margin-top: -13px;
      margin-left: -13px;
      z-index: 3;
    }
    &-small {
      border-radius: 14px;
      height: 14px;
      width: 14px;
      margin-top: -7px;
      margin-left: -7px;
      background: #c8a587;
      z-index: 3;
    }
    &-mid {
      border-radius: 20px;
      height: 20px;
      width: 20px;
      margin-top: -10px;
      margin-left: -10px;
      background: #c8a587;
      z-index: 3;
    }
  }
}

.mid-line {
  border-top: 1px solid #cececc;
  width: 100%;
  position: absolute;
  top: 50%;
  z-index: 1;
}